<template>
    <div>
        <div class="box">猜你喜欢</div>
        <div class="sel">
            <span><select name="" id="select">
                    <option value="综合排序" v-for="(item , index) in option" :key="index">{{item}}</option>
                </select></span>
            <span @click="mysort(index)" v-for="(item , index) in btnArr" :key="index">{{item}}</span>
        </div>
        <div class="spa">
            <span>年货节热卖</span>
            <span>津贴联盟</span>
            <span>满减优惠</span>
            <span>品质联盟</span>
        </div>
        <div class="list">
            <div class="shop" v-for="(item,index) in list" :key="index">
                <div class="imgbox">
                    <img :src="item.pic" alt="">
                </div>
                <div class="text">
                    <div class="name">{{item.name}}</div>
                    <div class="saled">月售 {{item.saled}} 件</div>
                    <div class="faster">距离&nbsp;{{item.faster}}&nbsp;km</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
var pic = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202102%2F26%2F20210226073347_50f94.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668240950&t=a5e75c663474fbf7b874b9e7a9324adf';
export default {
    data() {
        return {
            option: ['综合排序', '按价格'],
            btnArr: ['距离最近', '销量最高', '筛选'],
            list: [
                { pic, name: '兰州拉面', saled: 88, faster: 34 },
                { pic, name: '百姓饺子馆', saled: 15, faster: 40 },
                { pic, name: '重庆小面', saled: 20, faster: 20 },
            ]
        }
    },
    methods: {
        mysort(index) {
            if (index == 0) {
                this.list.sort((a, b) => {
                    return a.faster - b.faster;
                })
            }
            else if (index == 1) {
                this.list.sort((a, b) => {
                    return b.saled - a.saled;
                })
            }
        }
    }
}
</script>

<style lang='scss' scoped>
.box {
    font-size: 20px;
    font-weight: bold;
    margin: 10px 20px;
}

.sel #select {
    border: none;
}

.sel span {
    display: inline-block;
    margin: 3px 15px;
    font-size: 14px;

}

.spa span {
    display: inline-block;
    margin: 10px 15px;
    font-size: 14px;
    background-color: #E3E4E5;
}

.list .shop {
    margin: 10px;
    display: flex;
}

.list .shop .imgbox {
    width: 80px;
    margin-right: 10px;
}

.list .shop .imgbox img {
    width: 100%;
}

.list .shop .text {
    flex: 1;
    font-size: 14px;
}

.list .shop .text .name {
    font-weight: bold;
}
</style>